<div class="content fixed-fluid">
    <div class="row-fluid">
        <div class="main-content">
            <div class="mozaic-widget notifications widget-notifications message-box"></div>
            <div class="numberofmentions">
                <div class="mozaic-widget top-stream-info mozaic-initialized widget-new_items" data-guid="widget-584" ></div>
            </div>
            <div class="signals mozaic-widget skip-loading-animation mozaic-initialized widget-expanding_signal_list" data-guid="widget-585" >
                <div class="mozaic-widget list-header mozaic-initialized widget-signal_list_header" data-guid="widget-592" >
                    <div class="signal-list-header">
                        <h1 class="stream-title"><em class="icon-signals"></em><span>Signals</span></h1><a class="btn btn-filter-bar back-btn pull-right"><em class="icon-back"></em>Back</a>
                    </div>
                </div>

                <div class="list-viewport">
                    <?php
                    $masterView = MasterView::getInstance();
                    if ($masterView->error == '') :
                        ?>
                        <?php
                        $tagGroups = Tag::getGroups();
                        $tags = Tag::getTagsByGroup();
                        if (count($tagGroups) > 3) {
                            ?>
                            <div id="tagMenu" class="dropdown-menu" style="display: none;">
                                <ul class="overview">
                                    <?php foreach ($tagGroups as $group) : ?>
                                        <li data-id="<?php echo $group['id']; ?>" class="email">
                                            <a><font><?php echo $group['name']; ?></font></a>
                                            <div class="dropdown-menu">
                                                <ul class="overview sub-menu">
                                                    <?php
                                                    foreach ($tags as $tag) :
                                                        if ($tag->groupId != $group['id'])
                                                            continue;
                                                        ?>
                                                        <li data-id="<?php echo $tag->tagId; ?>" class="email">
                                                            <a title="<?php echo $tag->keywords; ?>"><font><?php echo $tag->tagName; ?></font></a>
                                                        </li>
                                                    <?php endforeach; ?>
                                                </ul>
                                            </div>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php } else { ?>
                            <div id="tagMenu" class="dropdown-menu" style="display: none;">
                                <ul class="overview vertical">
                                    <?php foreach ($tagGroups as $group) : ?>                   
                                        <li>
                                            <a><font><?php echo $group['name']; ?></font></a>
                                            <ul class="overview sub-menu">
                                                <?php
                                                foreach ($tags as $tag) :
                                                    if ($tag->groupId != $group['id'])
                                                        continue;
                                                    ?>
                                                    <li data-id="<?php echo $tag->tagId; ?>" class="email">
                                                        <a title="<?php echo $tag->keywords; ?>"><font><?php echo $tag->tagName; ?></font></a>
                                                    </li>
                                                <?php endforeach; ?>
                                            </ul>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php } ?>
                        <ul class="mozaic-widget list mozaic-initialized widget-signals" data-guid="widget-593" data-widget="signals">

                        </ul>
                        <div class="loading" style="">
                            <div class="loading-percent"></div>
                            <h3>Loading more threads...</h3>
                        </div>
                        <style>
                            .loading-percent {
                                width: 0%;
                                background-color: #008000;
                                height: 2px;
                                -webkit-transition: all 0.3s ease-in-out;
                            }
                            .loading {
                                text-align: center;
                                position: fixed;
                                bottom: 0px;
                                z-index: 20000;
                                width: 100%;
                                height: 0%;
                                -webkit-transition: all 0.1s ease-in-out;
                                -moz-transition: all 0.1s ease-in-out;
                                -o-transition: all 0.1s ease-in-out;
                                transition: all 0.1s ease-in-out;
                            }
                            ul.widget-signals {
                                margin: 0 !important;
                            }
                            .mention-core {
                                padding: 14px !important;
                                min-height: 0px;
                                margin-bottom: 3px !important;
                            }
                        </style>
                    <?php else : ?>
                        <div class="loading" style="text-align: center; padding: 50px 0px;">
                            <h3><?php echo $masterView->error; ?></h3>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="signal-preview">
                    <iframe src="" id="signal-preview"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#controller-container').animate({'opacity': 0}, 100);
    $('.background-loading').animate({'opacity': 1}, 100);
    if ($('script[src="/JS/Desktop/streamActions.js"]').length == 0)
        LazyLoad.js("/JS/Desktop/streamActions.js");
    var objectId = '';
    var noMoreMessage = false;
    $('.list-viewport').on('scroll', function()
    {
        if (!pause && !noMoreMessage) {
            if ($('.list-viewport').scrollTop() > $('.list-viewport ul.widget-signals').height() - 2000 || $('ul.widget-signals').height() < $('.list-viewport').height())
            {
                $('.loading').width($('.signal-preview').offset().left - $('ul.widget-signals').offset().left);
                $('.loading').height(30);
                page++;
                streamId = window.location.href.split('#')[1].split('/')[1];
                filter = $(this).parents('.opened').attr('id');
                dateFrom = $('#from').datepicker().val();
                dateTo = $('#to').datepicker().val();
                threadId = '';
                if (window.location.href.split('#')[1].split('/')[2] !== undefined) {
                    threadId = window.location.href.split('#')[1].split('/')[2];
                    $('.loading>h3').text('Loading more messages...');
                }
                else {
                    $('.loading>h3').text('Loading more threads...');
                }

                index = streamEntryEachPage * (page - 1);
                sentiment = $('#sentiment-filter-widget a.selected').attr('data-value');
                if ($('#sentiment-filter-widget a.selected').length == 0)
                    sentiment = 0;
                language = $('#language-filter-widget').find('a').attr('data-value');
                type = $('#platform-filter-widget').find('a').attr('data-value');
                tag = $('#tag-filter-widget').find('a').attr('data-value');
                var source = $('#source-filter-widget').find('a').attr('data-value');
                pause = true;
                var messageActionFilter = '';
                if ($('ul.message-action-filter .active-section').length != 0)
                    messageActionFilter = '?filter=' + $('ul.message-action-filter .active-section i').attr('class').split(' ')[0].split('icon-main-menu-')[1];
                lastSeenPos = 0;
                loadpSentimentStream(streamId, dateFrom, dateTo, index, streamEntryEachPage, language, tag, sentiment, messageActionFilter, type, source, function(text) {
                    var splitText = ' |||||| ';
                    var newPos = text.indexOf(splitText, lastSeenPos + 1);
                    while (newPos !== -1) {
                        var element = '';
                        if (lastSeenPos > 0)
                            element = text.substring(lastSeenPos + splitText.length, newPos);
                        else
                            element = text.substring(lastSeenPos, newPos);
                        $('.list-viewport ul.widget-signals').append(element.replace(/\|\|\|\|\|\|/g, ''));
                        lastSeenPos = newPos;
                        newPos = text.indexOf(' |||||| ', lastSeenPos + 1);
                    }
                }, loadPSentimentStreamComplete);
            }
        }
    });
    /*
     $('#plusone').remove();
     var po = document.createElement('script');
     po.id = 'plusone';
     po.type = 'text/javascript';
     po.async = true;
     po.src = 'https://apis.google.com/js/client:plusone.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(po, s);
     */

    function loadpSentimentStream(streamId, dateFrom, dateTo, index, length, language, tag, sentiment, messageActionFilter, type, source, progressFunc, callbackFunc) {
        function getXMLHttpRequest() {
            if (window.XMLHttpRequest) {
                return new window.XMLHttpRequest;
            } else {
                try {
                    return new ActiveXObject("MSXML2.XMLHTTP");
                } catch (ex) {
                    return null;
                }
            }
        }

        function handler() {
            if (oReq.readyState == 4 /* complete */) {
                if (oReq.status == 200) {
                    callbackFunc(oReq.responseText);
                }
            }
        }

        var oReq = getXMLHttpRequest();
        if (oReq != null) {
            var undefinedFilter = '';
            if (window.location.href.split('#')[1].split('/')[3] !== undefined) {
                undefinedFilter = 'undefined';
            }
            oReq.open("GET", "/loadSentimentStream/" + streamId + "/" + dateFrom + "/" + dateTo + '/' + index + '/' + length + '/' + language + "/" + tag + "/" + sentiment + messageActionFilter + '/' + type + '/' + source + '?undefined=' + undefinedFilter + "&threadId=" + threadId, true);
            oReq.onreadystatechange = handler;
            oReq.onprogress = progress;
            oReq.send();
            return oReq;
        } else {
            window.alert("AJAX (XMLHTTP) not supported.");
        }

        function progress() {
            progressFunc(oReq.responseText);
        }

    }

    function loadPSentimentStreamComplete(data) {
        //console.log(data);
        if (data.indexOf('class="forgot-password-link"') != -1)
            window.location.reload(true);
        if (data == 'Your query has no result! Try again!') {
            pause = true;
            noMoreMessage = true;
            if ($('.list-viewport ul.widget-signals').height() - $(window).height() > 0) {
                if ($('ul.widget-signals').html().trim() == '')
                    showMessage('No message to show... Please try again later');
                else
                    showMessage('No more message to show...');
            }
            else {
                showMessage('No more message to show...');
            }
            $('.loading').height(0);
            $('.loading-percent').width(0);
            return;
        }
        if (data == 'Error [1] offset out of bounds (offset=10000, max_matches=1000') {
            pause = true;
            noMoreMessage = true;
            if ($('.list-viewport ul.widget-signals').height() - $(window).height() > 0)
                showMessage('No more threads to show');
            $('.loading').height(0);
            $('.loading-percent').width(0);
            return;
        }
        if (data.length == 0) {
            if (window.location.href.split('#')[1].split('/')[3] !== undefined) {

            }
            else {
                pause = true;
                noMoreMessage = true;
                if ($('.list-viewport ul.widget-signals').height() - $(window).height() > 0)
                    if ($('ul.widget-signals').html().trim() == '')
                        showMessage('No message to show... Please try again later');
                    else
                        showMessage('No more message to show...');
                $('.loading').height(0);
                $('.loading-percent').width(0);
                return;
            }

        }
        if (data.trim() == 'Error [-1] Server having problem now and it is trying to fix itself automatically! Please try again after at least 2 minutes or contact the administrator!.') {
            pause = true;
            noMoreMessage = true;
            showMessage(data.trim());
            $('.loading').height(0);
            $('.loading-percent').width(0);
            return;
        }
        $('.loading-percent').css('width', '100%');
        //$('.list-viewport ul.widget-signals').append(data);
        var titles = $('.mention-title .action-color-hover');
        if (titles.length > 0) {
            titles.each(function() {
                $(this).width($(this).parent().parent().prev().offset().left - $(this).offset().left);
            });
        }
        searchInStream($('#doSearchInStream').val());
        var ttimer = setTimeout(function() {
            $('.loading').height(0);
            $('.loading-percent').width(0);
        }, 1000);
        pause = false;
        $('.view-thread .unassigned').each(function() {
            var undefinedFilter = '';
            var streamId = window.location.href.split('#')[1].split('/')[1];
            var url = '/#sentiment/' + streamId + '/' + $(this).parent().attr('threadid');
            if (window.location.href.split('#')[1].split('/')[3] !== undefined) {
                url += '/u';
            }
            $(this).attr('href', url);
            $(this).removeClass('unassigned');
        });
    }
</script>
<script>
    $(document).on('mouseover', '.simple-tag', function(e) {
        if ($(this).prev().children('[disabled=disabled]').length == 1) {
            var curScore = $(this).prev().children('[disabled=disabled]').attr('score');
            if (curScore == '0' || curScore == '-3') {
                return;
            }
        }
        var right = e.pageX + $('#tagMenu').width();
        var left = right - $('#tagMenu').width() - $('.list-viewport').offset().left;
        if (right > $(document).width() - 20) {
            left = left - $('#tagMenu').width();
        }
        $('#tagMenu').css('left', left + 'px');
        $('#tagMenu').css('top', $(this).offset().top + $(this).height() + $('.list-viewport').scrollTop() + 'px');
        $('#tagMenu').css('display', 'block');
        curMessage = $(this).parents('li.mention-content');
    });

    $(document).on('mouseover', '.mention-content .mention-core', function(e) {
        $('#tagMenu').css('display', 'none');
    });

</script>
<style>
    .simple-tag .tag-holder-container {
        color: white;
        height: 20px;
        line-height: 20px;
        background: #ff9900;
        border: 1px solid #fff;
        border-right: 0;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        padding: 0 7px;
        float: right;
        position: relative;
        margin-right: 4px;
        margin-top: 4px;
    }

    .view-thread {
        position: absolute;
        right: 25px;
        top: 30px;
        font-weight: bold;
        font-size: 13pt;
        color: orange;
        cursor: pointer;
    }
</style>
<script>
    //autoload
    var autoLoadTimer = setInterval(function() {
        if ($('ul.widget-signals').height() < $('.list-viewport').height())
            $('.list-viewport').scroll();
    }, 1000);
</script>